<template>
  <div ref="container">
    <canvas ref="liveCanvas" />
    <div ref="dialogBox" class="live2d-dialog">
      <div class="dialog-content">
        <div class="dialog-header">
          <div class="weather-icon" :class="isDaytime ? 'sun' : 'moon'"></div>
        </div>
        <div class="dialog-text">{{ dialogText }}</div>
      </div>
      <div class="dialog-arrow"></div>
      <!-- 白天装饰元素 -->
      <div class="day-decoration" v-if="isDaytime">
        <div class="cloud cloud-1"></div>
        <div class="cloud cloud-2"></div>
        <div class="bird bird-1"></div>
        <div class="bird bird-2"></div>
      </div>
      <!-- 夜晚装饰元素 -->
      <div class="night-decoration" v-if="!isDaytime">
        <div class="star star-1"></div>
        <div class="star star-2"></div>
        <div class="star star-3"></div>
        <div class="star star-4"></div>
        <div class="meteor meteor-1"></div>
        <div class="meteor meteor-2"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
canvas {
  position: fixed;
  bottom: -60%;
  right: -85%;
  z-index: 9999;
  pointer-events: auto;
}

.live2d-dialog {
  position: fixed;
  z-index: 9999;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  width: 220px;
}

.dialog-text {
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  position: relative;
  z-index: 10;
}

.dialog-arrow {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -12px;
  border-width: 12px;
  border-style: solid;
}

/* 白天主题箭头（增强对比度） */
.is-day .dialog-arrow {
  border-color: #90caf9 transparent transparent transparent; /* 更深的蓝色 */
}

/* 夜晚主题箭头（增强对比度） */
.is-night .dialog-arrow {
  border-color: #64b5f6 transparent transparent transparent; /* 浅蓝色箭头 */
}

/* 白天主题样式（淡蓝色系） */
.is-day .dialog-content {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  box-shadow: 0 8px 30px rgba(135, 206, 235, 0.3);
  border: 1px solid #90caf9;
}

.is-day .dialog-text {
  color: #333;
}

.is-day .sun {
  background: radial-gradient(circle, #fff8e1 0%, #ffd700 100%);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
}

.is-day .cloud,
.is-day .cloud:before,
.is-day .cloud:after {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.5);
}

/* 夜晚主题样式（深蓝色系） */
.is-night .dialog-content {
  background: linear-gradient(135deg, #2a2a48 0%, #4e54c8 100%);
  box-shadow: 0 8px 30px rgba(30, 144, 255, 0.2);
  border: 1px solid #3949ab;
}

.is-night .dialog-text {
  color: #f0f0f0;
}

.is-night .moon {
  box-shadow: 4px 4px 0 rgba(248, 248, 255, 0.8);
}

.is-night .star {
  background: #f8f8ff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* 公共样式 */
.dialog-content {
  position: relative;
  border-radius: 16px;
  padding: 15px;
  min-height: 80px;
  overflow: hidden;
}

.dialog-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.weather-icon {
  width: 24px;
  height: 24px;
  position: relative;
}

.sun,
.moon {
  border-radius: 50%;
  animation-fill-mode: both;
}

.day-decoration,
.night-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 云朵样式 */
.cloud {
  position: absolute;
  border-radius: 20px;
  animation: cloudMove 20s linear infinite;
}

.cloud:before,
.cloud:after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.cloud-1 {
  top: 10px;
  left: -40px;
  width: 60px;
  height: 15px;
  animation-delay: 0s;
}

.cloud-1:before {
  top: -15px;
  left: 10px;
  width: 25px;
  height: 25px;
}

.cloud-1:after {
  top: -10px;
  left: 35px;
  width: 20px;
  height: 20px;
}

.cloud-2 {
  top: 40px;
  left: -60px;
  width: 70px;
  height: 18px;
  animation-delay: 5s;
  animation-duration: 25s;
}

.cloud-2:before {
  top: -18px;
  left: 15px;
  width: 30px;
  height: 30px;
}

.cloud-2:after {
  top: -12px;
  left: 45px;
  width: 22px;
  height: 22px;
}

/* 星星样式 */
.star {
  position: absolute;
  border-radius: 50%;
  animation: starTwinkle 3s infinite alternate;
}

.star-1 {
  top: 15px;
  left: 20px;
  width: 3px;
  height: 3px;
  animation-delay: 0s;
}

.star-2 {
  top: 35px;
  left: 50px;
  width: 2px;
  height: 2px;
  animation-delay: 0.5s;
}

.star-3 {
  top: 25px;
  left: 80px;
  width: 2.5px;
  height: 2.5px;
  animation-delay: 1s;
}

.star-4 {
  top: 40px;
  left: 110px;
  width: 2px;
  height: 2px;
  animation-delay: 1.5s;
}

/* 白天飞鸟样式 */
.bird {
  position: absolute;
  width: 16px;
  height: 10px;
  animation: birdFly infinite linear;
  opacity: 0.8;
}

.bird:before,
.bird:after {
  content: "";
  position: absolute;
  background: #333;
}

.bird:before {
  width: 16px;
  height: 10px;
  border-radius: 8px 8px 0 0;
  transform: rotate(-15deg);
  transform-origin: left bottom;
}

.bird:after {
  width: 12px;
  height: 8px;
  border-radius: 6px 6px 0 0;
  transform: rotate(30deg);
  transform-origin: right bottom;
  right: -2px;
  top: 1px;
}

.bird-1 {
  top: 20px;
  left: -20px;
  animation-duration: 8s;
  animation-delay: 2s;
}

.bird-2 {
  top: 50px;
  left: -30px;
  animation-duration: 10s;
  animation-delay: 4s;
}

/* 夜晚流星样式 */
.meteor {
  position: absolute;
  width: 20px;
  height: 4px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  border-radius: 2px;
  animation: meteorFly infinite linear;
  opacity: 0.9;
}

.meteor:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #fff;
  right: -4px;
  top: -1px;
}

.meteor-1 {
  top: 15px;
  left: -20px;
  transform: rotate(25deg);
  animation-duration: 6s;
  animation-delay: 1s;
}

.meteor-2 {
  top: 40px;
  left: -30px;
  transform: rotate(-15deg);
  animation-duration: 7s;
  animation-delay: 3s;
}

/* 动画效果 */
@keyframes sunPulse {
  from {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
  }
  to {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.9);
  }
}

@keyframes moonFloat {
  from {
    transform: translateY(0) rotate(-5deg);
  }
  to {
    transform: translateY(3px) rotate(5deg);
  }
}

@keyframes cloudMove {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(280px);
  }
}

@keyframes starTwinkle {
  from {
    opacity: 0.4;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes birdFly {
  from {
    transform: translateX(-30px) rotate(0deg);
  }
  to {
    transform: translateX(250px) rotate(360deg);
  }
}

@keyframes meteorFly {
  from {
    transform: translateX(-30px) rotate(0deg);
  }
  to {
    transform: translateX(250px) rotate(10deg);
  }
}

@media (max-width: 768px) {
  canvas {
    position: fixed;
    bottom: -60%;
    right: -60%;
    z-index: 9999;
    pointer-events: auto;
  }

  .live2d-dialog {
    position: fixed;
    width: 100px;
  }

  .dialog-content {
    padding: 12px;
    border-radius: 12px;
  }

  .dialog-text {
    font-size: 14px;
    line-height: 1.5;
  }
}

@media (max-width: 768px) {
  .dialog-arrow {
    border-width: 10px;
    margin-left: -10px;
  }

  .weather-icon {
    width: 20px;
    height: 20px;
  }

  .cloud-1,
  .cloud-2 {
    width: 50px;
    height: 12px;
  }
  .cloud-1:before,
  .cloud-1:after,
  .cloud-2:before,
  .cloud-2:after {
    width: 20px;
    height: 20px;
  }

  .star-1 {
    width: 2.5px;
    height: 2.5px;
  }
  .star-2,
  .star-3,
  .star-4 {
    width: 1.8px;
    height: 1.8px;
  }

  .bird {
    width: 12px;
    height: 8px;
  }
  .bird:before {
    width: 12px;
    height: 8px;
  }
  .bird:after {
    width: 8px;
    height: 6px;
    right: -1px;
    top: 0.5px;
  }

  .meteor {
    width: 16px;
    height: 3px;
  }
}

@media (max-width: 768px) {
  @keyframes cloudMove {
    to {
      transform: translateX(200px);
    }
  }

  @keyframes birdFly {
    to {
      transform: translateX(200px) rotate(360deg);
    }
  }

  @keyframes meteorFly {
    to {
      transform: translateX(200px) rotate(10deg);
    }
  }

  .cloud-1 {
    animation-duration: 18s;
  }
  .cloud-2 {
    animation-duration: 22s;
  }

  .bird-1 {
    animation-duration: 7s;
  }
  .bird-2 {
    animation-duration: 9s;
  }

  .meteor-1 {
    animation-duration: 5s;
  }
  .meteor-2 {
    animation-duration: 6s;
  }
}
</style>

<script setup>
import * as PIXI from "pixi.js";
import { Live2DModel } from "pixi-live2d-display/cubism4";
import characters from "@/utils/live2d/config";
window.PIXI = PIXI;

// 判断白天/夜晚（6:00-18:00为白天）
const isDaytime = computed(() => {
  const now = new Date();
  const hour = now.getHours();
  return hour >= 6 && hour < 18;
});
const container = ref(null);
const liveCanvas = ref(null);
const dialogBox = ref(null);
const dialogText = ref("");
const character = reactive(isDaytime ? characters[0] : characters[1]);
const isWeb = computed(() => window.innerWidth >= 768);
console.log(window.innerWidth);

let app = null;
const model = ref();
const dialogState = ref({
  visible: false, // 对话框是否可见
  timer: null, // 自动隐藏定时器
  isThrottled: false, // 节流状态
});

onMounted(async () => {
  // 初始化PIXI应用
  app = new PIXI.Application({
    view: liveCanvas.value,
    autoStart: true,
    resizeTo: window,
    backgroundAlpha: 0,
  });

  // 加载Live2D模型
  model.value = await Live2DModel.from(character.settings.src);
  app.stage.addChild(model.value);
  if (!isWeb.value) {
    model.value.scale.set(character.settings.scale.phone);
    model.value.position.set(
      character.settings.position.phone.x,
      character.settings.position.phone.y
    );
  } else {
    model.value.scale.set(character.settings.scale.web);
    model.value.position.set(
      character.settings.position.web.x,
      character.settings.position.web.y
    );
  }
  // 启用模型的交互
  model.value.interactive = true;
  model.value.buttonMode = true;

  // 添加点击事件监听
  model.value.on("pointerdown", handleModelClick);
});

// 处理模型点击事件
function handleModelClick() {
  // 清除之前的定时器
  if (dialogState.value.isThrottled) return;

  if (dialogState.value.timer) {
    clearTimeout(dialogState.value.timer);
  }
  // 触发表情和消息切换（带节流）
  changeExpressionAndMessage();
}

function changeExpressionAndMessage() {
  // 设置节流状态
  dialogState.value.isThrottled = true;

  // 切换表情
  changeRandomExpression();

  // 显示消息
  showRandomMessage();

  // 5秒后解除节流（与表情节流时间一致）
  setTimeout(() => {
    dialogState.value.isThrottled = false;
  }, 5000);
}

// 切换随机表情
function changeRandomExpression() {
  const randomIndex = Math.floor(Math.random() * character.expressions.length);
  const expressionName = character.expressions[randomIndex];

  // 切换表情
  model.value.expression(expressionName);
}

// 根据当前时段获取随机消息
function getRandomMessageByTime() {
  const now = new Date();
  const hour = now.getHours();

  let messageGroup;
  if (hour >= 6 && hour < 12) {
    messageGroup = character.messages.morning;
  } else if (hour >= 12 && hour < 14) {
    messageGroup = character.messages.noon;
  } else if (hour >= 14 && hour < 18) {
    messageGroup = character.messages.afternoon;
  } else {
    messageGroup = character.messages.night;
  }
  const randomIndex = Math.floor(Math.random() * messageGroup.length);
  return messageGroup[randomIndex];
}

// 显示随机消息
function showRandomMessage() {
  const message = getRandomMessageByTime();
  dialogText.value = message;

  // 应用主题
  dialogBox.value.classList.toggle("is-day", isDaytime.value);
  dialogBox.value.classList.toggle("is-night", !isDaytime.value);

  // 定位对话框
  positionDialogBox();

  // 显示对话框（带状态更新）
  dialogBox.value.style.opacity = "0";
  dialogBox.value.style.display = "block";

  // 触发重排以激活过渡动画
  dialogBox.value.offsetHeight;
  dialogBox.value.style.opacity = "1";
  dialogState.value.visible = true;

  // 设置自动隐藏定时器
  if (dialogState.value.timer) clearTimeout(dialogState.value.timer);
  dialogState.value.timer = setTimeout(() => {
    hideDialog();
  }, 3000);
}

// 隐藏对话框
function hideDialog() {
  dialogBox.value.style.opacity = "0";

  // 过渡完成后隐藏元素并更新状态
  setTimeout(() => {
    dialogBox.value.style.display = "none";
    dialogState.value.visible = false;
    dialogState.value.timer = null;
  }, 300);
}

// 定位对话框
function positionDialogBox() {
  if (!model.value || !dialogBox.value) return;

  const canvasRect = liveCanvas.value.getBoundingClientRect();
  const modelBounds = model.value.getBounds();

  const modelScreenX = canvasRect.left + modelBounds.x * model.value.scale.x;
  const modelScreenY = canvasRect.top + modelBounds.y * model.value.scale.y;

  const dialogWidth = 200;
  const dialogHeight = 80;

  let dialogX =
    modelScreenX +
    (modelBounds.width * model.value.scale.x) / 2 -
    dialogWidth / 2;

  let dialogY = modelScreenY - dialogHeight - 30;
  if (!isWeb.value) {
    dialogX += character.settings.dialogOffset.phone.x;
    dialogY += character.settings.dialogOffset.phone.y;
  } else {
    dialogX += character.settings.dialogOffset.web.x;
    dialogY += character.settings.dialogOffset.web.y;
  }
  dialogBox.value.style.left = `${dialogX}px`;
  dialogBox.value.style.top = `${dialogY}px`;
}

onBeforeUnmount(() => {
  model.value?.destroy();
  app?.destroy();
});
</script>
